<template>
  <div class="app-container">
     <!-- 搜索栏目 -->
    <div class="filter-container add1">
      <el-form :inline="true" :model="formQuery" class="demo-form-inline"> 
        <el-form-item label="标题">
          <el-input v-model="formQuery.title" placeholder="标题"></el-input>
        </el-form-item>
         <el-form-item label="作者">
          <el-input v-model="formQuery.author" placeholder="作者"></el-input>
        </el-form-item>
        <el-form-item label="摘要或简介">
          <el-input v-model="formQuery.abstract" placeholder="摘要或简介"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="_search">
              搜索
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table class="tabless" :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit
              highlight-current-row :row-class-name="tableRowClassName" @sort-change='sortChange' @selection-change="handleSelectionChange">
    
      <el-table-column align="center" label="序号" width="80" fixed>
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)"> </span>
        </template>
      </el-table-column>
      <!-- 表格主要列名称 -->
      <!-- 添加排序sortable='custom' sortable='customsss' -->
      <el-table-column align="center" prop="title" label="标题"  width="120px"></el-table-column>
      <el-table-column align="center" prop="publish_time" label="发布日期" width="120px" :formatter="_dateFormat"  ></el-table-column>
      <el-table-column align="center" prop="origin" label="文章原始源" width="200px" ></el-table-column>
      <el-table-column align="center" prop="source" label="爬虫获取源" width="200px" ></el-table-column>
      <el-table-column align="center" prop="url" label="文章链接" width="200px"  ></el-table-column>
      <el-table-column align="center" prop="type" label="文章类型"  ></el-table-column>
      <el-table-column align="center" prop="author" label="作者" ></el-table-column>
      <el-table-column align="center" prop="abstract" label="摘要或简介"  ></el-table-column>
      <el-table-column align="center" prop="content" label="正文内容" width="300"  >
         <template slot-scope="scope">
          <span :title="scope.row.content" v-text="scope.row.content.length > 60 ? scope.row.content.slice(0,60) + '...': scope.row.content "> </span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop = "video_url"  label="视频新闻在线链接" width="120px"  ></el-table-column>
      <el-table-column align="center" prop = "video_loc"  label="视频本地保存目录" width="60px"  ></el-table-column>
      <el-table-column align="center" prop = "create_at"  label="创建时间" width="120px"  :formatter="_dateFormat" ></el-table-column>
       <el-table-column align="center" prop = "mark"  label="备注" width="170px"  ></el-table-column>
    </el-table>
    <!-- 以上为主界面内容 -->
    <el-pagination
      @size-change="_handleSizeChange"
      @current-change="_handleCurrentChange"
      :current-page="listQuery.pageNum" 
      :page-size="listQuery.pageRow"
      :total="totalCount"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      class="pagination">
    </el-pagination>
  </div>
</template>
<script>

  export default {
    name: 'articles',
    data() {
      return {
        formQuery:{
          title:'',
          author:'',
          abstract:'',
        },
        list: [],//表格的数据
        listLoading: false,//数据加载等待动画
        totalCount:0,
        listQuery: {
          pageNum: 1,//页码
          pageRow: 10,//每页条数
        },
      }
    },
    mounted() {
      this._asynsGetTableData();
    },
    methods: {
      getIndex($index) {
        //表格序号
        return (this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'warning-row';
        } else if (rowIndex % 2 === 0) {
          // return 'success-row';
        }
        return '';
      },
      sortChange(){

      },
      handleSelectionChange(){

      },
      _dateFormat(row, column, cellValue, index){
          return new Date(cellValue).Format('yyyy-MM-dd');
      },
      _handleSizeChange(val){
         this.listQuery.pageRow = val;
         this._asynsGetTableData()
      },
      _handleCurrentChange(val){
        
         this.listQuery.pageNum = val;
         console.log(this.listQuery)
         this._asynsGetTableData() 
      },
      _search(){
         // 重制页面申请条件listQuery
         this.listQuery = { pageNum: 1,pageRow: 10};
         this._asynsGetTableData();
      },
      _asynsGetTableData(){
         this.listLoading = true;
         this.api({
                    url: "/statistical/getTechniqueArticleList",
                    method: "post",
                    headers:{
                      'content-type':'application/x-www-form-urlencoded'
                    },
                    data:this.$qs.stringify({
                      ...this.listQuery,
                      ...this.formQuery
                    })
            }).then(data => {
                this.listLoading = false;
                this.list = data.list;
                this.totalCount = data.totalCount;
            })
      },

    },
  }
</script>

<style lang="scss" scoped>
    .app-container{
      padding: 20px;
    }
</style>
